<template>
  <h3>f-super-set 组件示例</h3>

  <f-select v-model:value="type">
    <f-select-option value="radio" label="radio" />
    <f-select-option value="radio-button" label="radio-button" />
    <f-select-option value="switch" label="switch" />
    <f-select-option value="select" label="select" />
    <f-select-option value="tree-select" label="tree-select" />
    <f-select-option value="checkbox" label="checkbox" />
    <f-select-option value="checkbox-button" label="checkbox-button" />
    <f-select-option value="cascader" label="cascader" />
  </f-select>
  <f-select v-model:value="size">
    <f-select-option value="large" label="large" />
    <f-select-option value="default" label="default" />
    <f-select-option value="small" label="small" />
  </f-select>

  <f-super-set
    class="s-w200"
    v-model:value="dataValueD"
    :fieldNames="{ label: 'name', key: 'id' }"
    :type="type"
    :size="size"
    :query="getOptions"
    @change="changeTree">
    <template #option="option">
      <div>+ {{ option.label }} =</div>
    </template>
  </f-super-set>
  {{ dataValueD }}
  <hr />

  <f-form-layout
    :columns="[
      {
        label: '用法',
        field: 'x',
        type: 'super-set',
        required: true,
        props: {
          type: 'select',
          fieldNames: { label: 'name', key: 'id' },
          query: () => getOptions()
        },
        events: {
          change: (value, option) => {
            console.log('super-set:change', value, option);
          }
        }
      }
    ]"></f-form-layout>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';
import { http } from '../../packages/utils';

const dataValueD = ref();

const dataValueC = ref();
const dataValueB = ref();
const dataValue = ref();
const type = ref('select');
const size = ref('default');

const options = ref([
  {
    value: '1',
    label: '我是第一名',
    children: [{ value: 'A', label: 'A', children: [{ value: 'AA', label: 'AA' }] }]
  },
  { value: '2', label: 'Lucy', children: [{ value: 'B', label: 'B' }] },
  { value: '3', label: 'Tom', children: [{ value: 'C', label: 'C' }] }
]);

const apiExtendUsages = (data) =>
  http
    .post('/base/usages/getOrderUsages', http.adornParams(data))
    .then((res) => (res.isSuccess ? res.data : []));

const getOptions = () => {
  return apiExtendUsages({ usageType: '2' });
};
const optionsD = ref([
  { value: true, label: 'true' },
  { value: false, label: 'false' }
]);
const changeTree = (value, option) => {
  console.log('super-set:change', value, option);
};

// const apiServe = () => new Promise((resolve, reject) => {
//   fetch(`/cache-service/base-server/region/getListByParentCode?parentCode=0`, {
//     method: 'get',
//     headers: { 'Content-Type': 'application/json' }
//   })
//     .then(response => response.json())
//     .then(res => resolve(res.data))
//     .catch(() => reject())
// })

const apiServe = () =>
  new Promise((resolve, reject) => {
    fetch(`base/department/queryTree`, {
      method: 'post',
      body: JSON.stringify({}),
      headers: { 'Content-Type': 'application/json', Accesstoken: window['FokUIOptions'].token() }
    })
      .then((response) => response.json())
      .then((res) => resolve(res.data))
      .catch(() => reject());
  });
</script>

<style lang="scss">
.custom-tree-node {
  display: flex;
}
</style>
